import { defineComponent, ref, watch } from "vue";
import { getEvtOrgRank } from '@/api/statistics'
import './style.scss'
import TopIcon from '../../../assets/screendeck/rank-icon-top.png'
import normalIcon from '../../../assets/screendeck/rank-icon.png'
export default defineComponent({
  name: 'EventIOrgnvoke',
  props: {
    time: {
      type: Object,
      default: () => { }
    },
    code: { // 地区code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    }
  },
  setup(props) {
    const listData = ref([])
    const getData = async () => {
      const {endDate,startDate} = props.time
      const para = {
        areaCode: props.code,
        endDate,
        startDate
      }
      const res = await getEvtOrgRank(para);
      if (res.status === 200) {
        listData.value = res.data
      }
    };
    watch(() => props.refresh, () => {
      getData()
    });
    watch(() => props.code, () => {
			getData()
		});
    return () => <div class="event-org-invoke panel ranking">
     {listData.value == 0 ? <main class="no-data">
        暂无数据
      </main> : <main>
        {
          listData.value.map((item, index) => <div class="line" v-show={index<5}>
            <div class="info">
              <div class="name">NO.{index + 1} {item.x}</div>
              <div class="value">{item.y}</div>
            </div>
            <div class={{ 'bar': true, 'top': index < 3 }}>
              <div class="bar-el" style={{ width: (item.per ? item.per : 0) * 100 + '%' }} />
              <div class="bar-icon" style={{ left: (item.per ? item.per : 0) * 100 + '%' }}>
                <img src={index < 2 ? TopIcon : normalIcon} style={{ left: item.per && item.per > 0.1 ? '-22px' : '-8px' }} />
              </div>
            </div>
          </div>)
        }
      </main>}
    </div>
  }
})